<template>
	<view class="pagebody">
		<view class="bgfff" style="border-radius: 0 0 32rpx 32rpx;">
			<view class="topbox">
				<NavHeader></NavHeader>
			</view>
			<view class="navbox" style="padding: 16rpx 0rpx 8rpx;">
				<view class="title">
					日本医生导航
				</view>
				<view class="itembox">
					<view v-for="(item,index) in navlist" :key="index" class="item"
						@click="checkDisease(index,item.dictValue)" :class="isindex == index?'isitem':''">
						{{item.dictLabel}}医生
					</view>
				</view>
			</view>
		</view>

		<DoctorList :doctorlist="doctorlist"></DoctorList>
		<consulting></consulting>
		<lyb :title="'快速预约医生'"></lyb>
		<HospitalList :hospitalList="hospitalList"></HospitalList>
		<japanfw :type="1"></japanfw>
		<AdvCom :type='2'></AdvCom>
		<japanfw :type="2"></japanfw>
		<AdvCom :type='3'></AdvCom>
		<japanfw :type="3"></japanfw>
		<NewslistCom :head="1" :newsList="newsList"></NewslistCom>

		<FixedFoot :typeid="2"></FixedFoot>
	</view>
</template>

<script>
	import FixedFoot from '../../layouts/fixedfoot.vue';
	import NavHeader from '../../layouts/navheader.vue';
	import DoctorList from '../../components/generalcom/doctorlist.vue';
	import HospitalList from '../../components/generalcom/hospitallist.vue';
	import NewslistCom from '../../components/generalcom/newslistcom.vue';
	import consulting from '../../components/generalcom/consulting.vue'
	import lyb from '../../components/generalcom/lyb.vue';
	import japanfw from '../../components/generalcom/japanfw.vue';
	import AdvCom from '../../layouts/advcome.vue';
	import {
		getDicts,
		getHospitalList,
		getDoctorList,
		selectNewsList
	} from '@/api/api.js';

	export default {
		components: {
			FixedFoot,
			NavHeader,
			DoctorList,
			HospitalList,
			NewslistCom,
			consulting,
			AdvCom,
			lyb,
			japanfw

		},
		data() {
			return {
				navlist: [],
				isindex: 0,
				doctorlist: [],
				hospitalList: [],
				newsList: [],
			}
		},
		created() {
			this.getDicts();
			this.selectNewsList();
			this.checkDisease(0, '01')
		},
		methods: {
			getDicts() {
				getDicts('japan_disease').then(res => {
					this.navlist = res.data
				});
			},
			checkDisease(index, dictValue) {
				this.isindex = index
				this.getHospitalList(dictValue)
				this.getDoctorList(dictValue)
			},
			getHospitalList(japanDisease) {
				let param = {
					"pageNum": 1,
					"pageSize": 3,
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"diseaseId": japanDisease
				}
				getHospitalList(param).then(response => {
					this.hospitalList = response.rows
				})
			},

			getDoctorList(japanDisease) {
				let param = {
					"pageNum": 1,
					"pageSize": 3,
					"orderByColumn": "create_time",
					"isAsc": "desc",
					"japanDisease": japanDisease
				}
				getDoctorList(param).then(response => {
					this.doctorlist = response.rows
				})
			},
			selectNewsList() {
				let param = {
					"pageNum": 1,
					"pageSize": 4,
					"orderByColumn": "create_time",
					"isAsc": "desc"
				}

				selectNewsList(param).then(response => {
					this.newsList = response.rows
					this.newsList.forEach(item => {
						let str = item.content
						if (str) {
							let words = str.replace(/<[^<>]+>/g, "").replace(/&nbsp;/gi, "")
							str = words.replace(/\s/g, "")
							item.nostyletext = str
						}
					})

				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.pagebody {
		padding-bottom: 136rpx;
		background: #F0F6F5;

		.topbox {
			padding: 20rpx 24rpx;
			background: linear-gradient(180deg, rgba(0, 217, 178, 0.25) 0%, rgba(0, 217, 178, 0) 100%);
		}

		.navbox {
			.title {
				color: #00977C;
				font-weight: 800;
				font-size: 40rpx;
				line-height: 40rpx;
				padding: 0 25rpx;
			}

			.itembox {
				display: flex;
				flex-wrap: wrap;
				margin-top: 32rpx;
				padding: 0 0 0 25rpx;

				.item {
					font-size: 34rpx;
					font-weight: bold;
					height: 64rpx;
					min-width: 223rpx;
					margin-right: 16rpx;
					margin-bottom: 16rpx;
					border-radius: 16rpx;
					border: 1rpx solid #D7DDDC;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.isitem {
					color: #00D9B2;
					border: 1rpx solid #00D9B2;
				}
			}
		}


		.combodys {
			background: #fff;
			border-radius: 32rpx;
			margin-top: 16rpx;

			.head {
				height: 110rpx;
				padding: 10rpx 32rpx 0;
				border-bottom: 1px solid #D7DDDC;

				.headtetx {
					font-size: 40rpx;
					display: flex;
					align-items: center;
					height: 100rpx;
					margin-right: 40rpx;
					position: relative;
					font-weight: bold;

					.linebox {
						position: absolute;
						bottom: 0;
						width: 160rpx;
						height: 10rpx;
						background: #00D9B2;
						border-radius: 50rpx;
					}
				}
			}

			.con_div {
				box-sizing: border-box;
				padding: 32rpx 16rpx 16rpx;
				display: flex;
				flex-wrap: wrap;
				/* 使子元素换行 */

				.back_div {
					width: 343rpx;
					height: 82rpx;
					background: #EDFCF9;
					border-radius: 10px;
					font-weight: bold;
					font-size: 34rpx;
					color: #00977C;
					line-height: 82rpx;
					text-align: center;
					margin-bottom: 16rpx;

				}
			}
		}
	}
</style>